<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		ul li{
			float: left;
			list-style:none;
		}
		ul li button{
			width:70px;
			height:500px;
		}
		input{
			width:20px;
		}

	</style>
</head>
<body>
	<div>
		<span>调音</span>
		<button>+</button>
		<input type="text" value="4">
		<button>-</button>
	</div>
	<ul>
		<li><button>a(1)</button></li>
		<li><button>s(2)</button></li>
		<li><button>d(3)</button></li>
		<li><button>f(4)</button></li>
		<li><button>g(5)</button></li>
		<li><button>h(6)</button></li>
		<li><button>j(7)</button></li>
	</ul>
	
<script>

	// 先做调音调那块
		var aBtn = document.querySelectorAll("button");
		var oIpt = document.querySelector("input");
		aBtn[0].onclick=function() {
			oIpt.value=(oIpt.value++)>6?1:oIpt.value;
		}
		aBtn[1].onclick=function() {
			oIpt.value=(oIpt.value--)<2?7:oIpt.value;
		}

	// 获取按键
	var oUl = document.querySelector("ul");
	var aBtns = oUl.querySelectorAll("button");

	// 当键盘点击时，调用音乐响应函数
	window.onkeydown=function(e) {
		call(e)
	}

	// 当鼠标点击时，调用音乐响应函数
	var nums=[65,83,68,70,71,72,74];
	for (var i = 0; i<aBtns.length; i++) {
		aBtns[i].index=nums[i];
		aBtns[i].onclick=function() {
			call(this.index);
		}
	}


	// 制作音乐响应函数
	function call(e) {
	// e有两种可能  事件对象,或者是一个 数字
		// console.log(e.keyCode);
		// 键值	
		// a  s  d  f  g  h  j
		// 65 83 68 70 71 72 74
		 // 音律
		 // 1c 2d 3e 4f 5g 6a 7b
		 // 音乐文件名 a1 a2 a3 a4…………b1 b2 b3…………
 	// 判断
 	switch(e.keyCode || e){
 		case 65:
 		// 实例化一audio对象
 		var audio = new Audio();
 		// 设置好音频路径
 		audio.src="test/c"+oIpt.value+".mp3";
 		// 播放音频
 		audio.play();
 		break;
 		case 83:
		var audio=new Audio();
		audio.src="test/d"+oIpt.value+".mp3";
		audio.play();
		break;
		case 68:
		var audio=new Audio();
		audio.src="test/e"+oIpt.value+".mp3";
		audio.play();
		break;
		case 70:
		var audio=new Audio();
		audio.src="test/f"+oIpt.value+".mp3";
		audio.play();
		break;
		case 71:
		var audio=new Audio();
		audio.src="test/g"+oIpt.value+".mp3";
		audio.play();
		break;
		case 72:
		var audio=new Audio();
		audio.src="test/a"+oIpt.value+".mp3";
		audio.play();
		break;
		case 74:
		var audio=new Audio();
		audio.src="test/b"+oIpt.value+".mp3";
		audio.play();
		break;
 	}
	}
</script>
<div style="text-align:center;">
<p>更多源码：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>
